<template>
    <div>
        <c-template v-loading="loading" class="mb-lg tf-paragraph">
            <el-row :gutter="24" class="info-row">
                <el-col :span="24" class="detailsTitle mb-0">详情</el-col>
            </el-row>
            <el-divider></el-divider>
            <el-row :gutter="24" class="info-row">
                <el-col :span="6">
                    车辆信息：<span>{{orderInfo.carList.brand}}-{{orderInfo.carList.series}}-{{orderInfo.carList.model}}</span>
                </el-col>
                <el-col :span="6">
                    车架号 ：<span>{{orderInfo.carList.vin}}</span>
                </el-col>
                <el-col :span="6">
                    供应商名称：<span>{{orderInfo.carList.sellerName}}</span>
                </el-col>
                <el-col :span="6">
                    手机号：<span>{{orderInfo.carList.sellerPhone}}</span>
                </el-col>
                <el-col :span="6">
                    状态：<span>{{orderInfo.carList.procedureUploaded == 0 ?"手续未上传":"手续已上传"}}</span>
                </el-col>
                <el-col :span="6">
                    出口申请单号：<span>{{orderInfo.carList.carInApplyId}}</span>
                </el-col>
            </el-row>
        </c-template>
        <!-- 手续 -->
        <c-template v-loading="loading" class="mb-lg tf-paragraph">
            <el-row :gutter="24" class="info-row">
                <el-col :span="18" class="detailsTitle mb-0">车辆出口手续</el-col>
                <!-- <el-col :span="6" class="flex-x-end mb-0" v-if="orderInfo.carList.procedureUploaded == 0">
                    <c-upload class="mt-0" :showFileList="false" buttonName="上传车辆手续" listType="text" ref="UploadContract" @change="onContractTemplateUpload" />
                </el-col> -->
            </el-row>
            <el-divider></el-divider>
            <el-row :gutter="24" class="info-row">
                <el-col :span="24">
                    <el-table :header-cell-style="{ background: '#F1F1F1', color: '#092132' }" :data="orderInfo.carFilesList.filter((v) => v.type>0)" v-loading="loading">
                        <el-table-column label="序号" width="80" align="center" type="index" />
                        <el-table-column width="" label="手续类型" align="center">
                            <template slot-scope="scope">
                                {{proceduresType[scope.row.type].label}}
                            </template>
                        </el-table-column><el-table-column width="" label="手续名称" align="center">
                            <template slot-scope="scope">
                                <el-link type="primary" @click="handleOpenFile(scope.row.fileUrl)">{{scope.row.fileName}}</el-link>
                            </template>
                        </el-table-column>
                    </el-table>
                </el-col>
            </el-row>
        </c-template>
    </div>
</template>
<script>
import { proceduresType } from '@/utils/status.js'
export default {
    data () {
        return {
            loading: false,
            tableData: [],
            orderInfo: [],
            proceduresType: proceduresType
        };
    },
    mounted () {
        this.getInfo()
    },
    methods: {
        handleOpenFile (filePath) {
            if (filePath) {
                window.open(filePath);
            } else {
                this.$message.warning("服务器地址不存在");
            }
        },

        async getInfo () {
            if (this.$route.query.id) {
                this.isView = eval(this.$route.query.isView)
                this.id = this.$route.query.id
                const params = {
                    id: this.$route.query.id,
                };
                this.loading = true;
                let res = await this.$get({ url: "/carList/getOutCarById", params })
                this.orderInfo = res;

                this.loading = false

            }
        },
    },
};
</script>